<template>
    <!-- 添加 | 修改 | 查看弹窗 -->
    <el-dialog :title="`微信文章`" v-model="drawerVisible" width="1200px" append-to-body center destroy-on-close draggable
        :close-on-click-modal='false'>

        <ProTable ref="proTable" title="subsidiary列表" :columns="columns" :request-api="getTableList"
            :data-callback="dataCallback" :initParam="{}">
            <!-- <template #tableHeader="scope">
                <el-button type="warning" plain icon="Download" @click="handleExport">导出</el-button>
            </template> -->
        </ProTable>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="handleSubmit">确 定</el-button>
                <el-button @click="drawerVisible = false">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template >
<script setup lang="tsx" >
import { ref, reactive, getCurrentInstance, onMounted, toRefs } from "vue";
import { ElMessage, FormInstance } from "element-plus";
import {
    CirclePlus,
    Delete,
    EditPen,
    Download,
    Upload,
    View,
    Refresh
} from "@element-plus/icons-vue";
// import { listDept } from "@/api/chamberDept/index.js";
import { getWxDraft } from "@/api/common.js"
import { getDicts } from "@/api/system/dict/data";
import ProTable from "@/components/ProTable/index.vue";
import { validateChineseEnglish } from "@/utils/validate";
const { proxy } = getCurrentInstance();
const { sh_position } = toRefs<any>(proxy?.useDict("sh_position"));



//父组件传递参数类型
interface DiolgProps {
    title: string;
    isView: boolean;
    rowData: any;
    api?: (params: any) => Promise<any>;
    getTableList?: () => void;
    [proName: string]: any
}
const columns: any = [
    {
        type: "selection",
        fixed: "left",
        width: 80
    },
    {
        prop: 'title',
        label: '标题',
    },
    {
        prop: 'createTime',
        label: '创建时间',
    }
];
function handleExport() {
    console.log("导出");
    proxy.download("dynamics/record/exportActPeople", {
        actId: drawerProps.value.rowData.id
    }, `活动记录${new Date().getTime()}.xlsx`);
};
const proTable = ref(null);
// 请求列表接口
const getTableList = (params: any) => {
    // return drawerProps.value.api({ ...params, actId: drawerProps.value.rowData.id });
    return getWxDraft(params);
};
const dataCallback = (data: any) => {
    // setTimeout(() => {
    //     if (props.currentItem.rowData.userIds.length > 0) {
    //         props.currentItem.rowData.userIds.forEach(item => {
    //             let row = data.rows.find(row => row.id == item)
    //             if (row) {
    //                 proTable.value.element.toggleRowSelection(row, true)
    //             }
    //         })
    //     }
    // })
    // data.rows.forEach((item: any) => {
    //     item.deptName = item?.dept?.deptName ?? ''
    // })
    console.log("data", data)
    return { list: data.data, total: data.total };
};

// 提交数据（新增/编辑）
const ruleFormRef = ref<FormInstance>();
const drawerVisible = ref(false);
const drawerProps = ref<DiolgProps>({
    isView: false,
    title: "",
    rowData: {
        shInstitutionTypes: []
    },
});

// 接收父组件传过来的参数
const acceptParams = (params: DiolgProps) => {
    if (!params.rowData.displayDay) params.rowData.displayDay = 1;
    drawerProps.value = params;
    drawerVisible.value = true;
};

const handleSubmit = async() => {
    // ruleFormRef.value!.validate(async valid => {
    //     if (!valid) return;
    //     try {
    //         await drawerProps.value.api!(drawerProps.value.rowData);
    //         ElMessage.success({ message: `${drawerProps.value.title}成功！` });
    //         drawerProps.value.getTableList!();
    //         drawerVisible.value = false;
    //     } catch (error) {
    //         console.log(error);
    //     }
    // });
    // let ids = proTable.value.getSelectionRows().map(item => item.id);
    console.log("selectedList", proTable.value.selectedList)
    let selectedList = JSON.parse(JSON.stringify(proTable.value.selectedList));
    if(selectedList.length > 0){
            try {
                await drawerProps.value.api!({ shSyncArticles:selectedList});
                ElMessage.success({ message: `更新成功！` });
                drawerProps.value.getTableList!();
                drawerVisible.value = false;
            } catch (error) {
                console.log(error);
            }
    }else{
        ElMessage.error("请选择数据");
    }
};

const rules = reactive(
    {
        typeName: [
            { required: true, message: '类型不能为空', trigger: 'blur' },
            {
                validator: (rule, value, callback) => validateChineseEnglish(rule, value, callback, "请输入，限制18位，支持中英文"),
                trigger: "change"
            }
        ],
        status: [
            { required: true, message: '0正常1停用不能为空', trigger: 'blur' }
        ],
        content: [
            { required: true, message: '制度正文不能为空', trigger: 'blur' }
        ],
        delFlag: [
            { required: true, message: '是否删除0否1是不能为空', trigger: 'blur' }
        ],
        isHomeBanner: [
            { required: true, message: '是否置于首页banner位不能为空', trigger: 'blur' }
        ],
        bannerPic: [
            { required: true, message: '请上传首页banner图', trigger: 'blur' }
        ],
        displayDay: [
            { required: true, message: '天数不能为空', trigger: 'blur' }
        ]
    }
);
defineExpose({
    acceptParams
});
</script>
